<template>
  <div class="number-keyboard">
    <div v-if="currentPage === 'number'">
      <div class="row">
        <button class="key" @click="handleButtonClick(1)">1</button>
        <button class="key" @click="handleButtonClick(2)">2</button>
        <button class="key" @click="handleButtonClick(3)">3</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick(4)">4</button>
        <button class="key" @click="handleButtonClick(5)">5</button>
        <button class="key" @click="handleButtonClick(6)">6</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick(7)">7</button>
        <button class="key" @click="handleButtonClick(8)">8</button>
        <button class="key" @click="handleButtonClick(9)">9</button>
      </div>
      <div class="row">
        <button class="key" @click="switchToLetterPage">字母</button>
        <button class="key" @click="handleButtonClick(0)">0</button>
        <button class="key" @click="switchToSymbolPage">符号</button>
      </div>
    </div>
    <div v-else-if="currentPage === 'letter'">
      <div class="row">
        <button class="key" @click="handleButtonClick(capsLock ? 'Q' : 'q')">{{ capsLock ? 'Q' : 'q' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'W' : 'w')">{{ capsLock ? 'W' : 'w' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'E' : 'e')">{{ capsLock ? 'E' : 'e' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'R' : 'r')">{{ capsLock ? 'R' : 'r' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'T' : 't')">{{ capsLock ? 'T' : 't' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'Y' : 'y')">{{ capsLock ? 'Y' : 'y' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'U' : 'u')">{{ capsLock ? 'U' : 'u' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'I' : 'i')">{{ capsLock ? 'I' : 'i' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'O' : 'o')">{{ capsLock ? 'O' : 'o' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'P' : 'p')">{{ capsLock ? 'P' : 'p' }}</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick(capsLock ? 'A' : 'a')">{{ capsLock ? 'A' : 'a' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'S' : 's')">{{ capsLock ? 'S' : 's' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'D' : 'd')">{{ capsLock ? 'D' : 'd' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'F' : 'f')">{{ capsLock ? 'F' : 'f' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'G' : 'g')">{{ capsLock ? 'G' : 'g' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'H' : 'h')">{{ capsLock ? 'H' : 'h' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'J' : 'j')">{{ capsLock ? 'J' : 'j' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'K' : 'k')">{{ capsLock ? 'K' : 'k' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'L' : 'l')">{{ capsLock ? 'L' : 'l' }}</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick(capsLock ? 'Z' : 'z')">{{ capsLock ? 'Z' : 'z' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'X' : 'x')">{{ capsLock ? 'X' : 'x' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'C' : 'c')">{{ capsLock ? 'C' : 'c' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'V' : 'v')">{{ capsLock ? 'V' : 'v' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'B' : 'b')">{{ capsLock ? 'B' : 'b' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'N' : 'n')">{{ capsLock ? 'N' : 'n' }}</button>
        <button class="key" @click="handleButtonClick(capsLock ? 'M' : 'm')">{{ capsLock ? 'M' : 'm' }}</button>
      </div>
      <div class="row">
        <button class="key" @click="switchToNumberPage">数字</button>
        <button class="key" @click="toggleCapsLock">大小写切换</button>
      </div>
    </div>
    <div v-else-if="currentPage === 'symbol'">
      <div class="row">
        <button class="key" @click="handleButtonClick('@')">@</button>
        <button class="key" @click="handleButtonClick('#')">#</button>
        <button class="key" @click="handleButtonClick('$')">$</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick('%')">%</button>
        <button class="key" @click="handleButtonClick('&')">&</button>
        <button class="key" @click="handleButtonClick('*')">*</button>
      </div>
      <div class="row">
        <button class="key" @click="handleButtonClick('(')">(</button>
        <button class="key" @click="handleButtonClick(')')">)</button>
        <button class="key" @click="handleButtonClick('-')">-</button>
      </div>
      <div class="row">
        <button class="key" @click="switchToNumberPage">数字</button>
        <button class="key" @click="handleButtonClick('+')">+</button>
        <button class="key" @click="handleButtonClick('=')">=</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const currentPage = ref("number");
const capsLock = ref(false);



const handleButtonClick = (value: string | number) => {
  // 处理按钮点击逻辑
};

const switchToLetterPage = () => {
  currentPage.value = "letter";
};

const switchToSymbolPage = () => {
  currentPage.value = "symbol";
};

const switchToNumberPage = () => {
  currentPage.value = "number";
};
const toggleCapsLock = () => {
  capsLock.value = !capsLock.value;
};
</script>

<style scoped>
.number-keyboard {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 45%;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.key {
  width: 50%;
  height: 40px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.key:hover {
  background-color: #ddd;
}

.key:active {
  background-color: #bbb;
}
</style>
